<template>
	<view>
		
		<view class="u-padding-20">
			<view class="u-padding-20 u-text-center u-border-bottom u-font-weight">
				预约开台
			</view>
			<view style="margin: 50rpx auto ;text-align: center;">
				<view class="u-font-34 u-font-weight">{{info.storeName}}</view>
				<view class="u-font-34 u-font-weight u-flex u-margin-left-40 u-margin-top-40">
					<view class="u-margin-right-20">开台</view>
						<u-number-box   :min="items.yyTime/60"  color='#fff' bg-color="#5A53CE" v-model="time" @change="valChange"></u-number-box>
					<view  class="u-margin-left-20">小时</view>
				</view>
			</view>
		</view>
		
		<view class="" style="margin: 0  50rpx 50rpx  50rpx ;color: #888888;"> 
			1.只能提前半小时预约</br>
			2.预约时间到自动开台</br>
			3.预约后概不退款
		</view>
		
		<view class="u-flex u-padding-20" style="">
			<view style="padding-left: 40rpx; border-radius: 40rpx  0 0 40rpx;background: #000000;color: #fff;width: 70%;line-height:80rpx;">
				合计：￥{{(Number(items.basePrice)*time)+Number(items.yajin)}}
				
				<text class="u-margin-left-20">(含押金{{items.yajin}})</text>
			</view>
			
			<view @click="ok" style="text-align: center; border-radius: 0rpx  40rpx 40rpx 0rpx;background: #5A53CE;color: #fff;width: 30%;line-height:80rpx;">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"bookDesk",
		props:{
			info:{
				type:Object,
				default:()=>{}
			},
			items:{
				type:Object,
				default:()=>{}
			}
		},
		data(){
			return{
				time:1
			}
		},
		created() {
			this.time=this.items.yyTime/60
		},
		methods:{
			valChange(e){
				
			},
			ok(){
				this.$emit("bookPay",this.time)
			}
		}
	}
</script>

<style>
</style>